<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<nav class="navbar navbar-expand-md bg-black navbar-black">
    <div class="container">
        <h1> <a href="http://localhost:9300" class="navbar-brand text-light"><i class="bi bi-fire">火游游戏商城</i></a></h1>
        <ul class="navbar-nav ms-auto ">
            <li class="nav-item "><div class="nav-link"><p class="navbar-brand text-light" disabled="disabled"><i class="bi bi-balloon-heart"></i>已有账号?<a style="color:white;" href="http://localhost:9100/login">请登录</a></a></i></p></div></li>
        </ul>
    </div>
</nav>
<!-- 头 -->


<section style="background-color: gray;">
    <div class="container">
        <div class="text-center" >
            <div style="height: 20px;">
                <h6 class="text-light">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<b >火游游戏商城隐私政策</b>》已上线，将更有利于保护您的个人隐私。</h6>
            </div>
        </div>
    </div>
</section>


<section>
    <div class="card" style="width: 350px;position:absolute;margin-left: 300px;margin-top: 10px;" >
        <div class="card-body" >
            <form id="regist" action="/regist" method="post" class="form-horizontal" role="form">
                <p style="color: red;" th:text="${msg}"></p>
                <h2><b>用户注册</b></h2>
                    <div class="form-group mb-3">
                        <label for="username" class="col-sm-5 control-label">用户名:</label>
                        <div class="col-sm-7 inline">
                            <input type="text" style="width: 300px;" class="form-control" id="username" placeholder="用户名长度为3-18个字符" name="username">
                        </div>
                        <div class="tips" style="color: red"  th:text="${errors != null ? (#maps.containsKey(errors, 'username') ? errors.username : '') : ''}">

                        </div>
                    </div>
                    <div class="form-group mb-3">

                        <div class="col-sm-7">
                            <label for="password" class="col-sm-5 control-label">密码:</label>
                            <input type="password" style="width: 300px;" class="form-control" id="password" placeholder="密码长度为6-10" name="password">
                        </div>
                        <div class="tips" style="color: red"  th:text="${errors != null ? (#maps.containsKey(errors, 'password') ? errors.password : '') : ''}">

                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-7 mb-3">
                            <label class="col-sm-5 control-label">性别:</label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="male" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="female"  value="女"> 女
                            </label>
                        </div>
                    </div>



                    <div class="form-group mb-3">
                        <label for="phone" class="col-sm-5 control-label">联系电话:</label>
                        <div class="col-sm-7">
                            <input type="text" style="width: 300px;" class="form-control"  id="phone" name="phone">
                        </div>
                        <div class="tips" style="color: red"  th:text=" ${errors != null ? (#maps.containsKey(errors, 'phone') ? errors.phone : '') : ''}">

                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="email" class="col-sm-5 control-label">Email:</label>
                        <div class="col-sm-7">
                            <input type="text" style="width: 300px;" class="form-control"  id="email" name="email">
                        </div>
                        <div class="tips"  style="color: red" th:text="${errors != null ? (#maps.containsKey(errors, 'email') ? errors.email : '') : ''}">

                        </div>
                    </div>
                    <div class="form-group mb-3" align="left" style="float:left">
                        <label for="yzm" class="col-sm-5 control-label">验证码:</label>
                        <div class="col-sm-7">
                            <input type="text" style="width: 150px;" class="form-control"  id="yzm" name="yzm">
                        </div>
                        <div class="tips" style="color: red"  th:text="${errors != null ? (#maps.containsKey(errors, 'yzm') ? errors.yzm : '') : ''}">

                        </div>

                    </div>
                    <div align="right" style="padding-top: 28px;padding-right: 50px; ">
                        <a id="sendCode" href="#">发送验证码</a>
                    </div>

                    <button style="width:200px;margin-left: 50px;" type="submit" class="btn btn-dark">注册</button>

            </form>
        </div>
    </div>
    <!-- <div style="background-image:url("/image/1122.jpeg"); background-size: 100% 100%;">12312321</div> -->
    <div >
        <img  style="width: 100%;height: 700px;" src="/image/333.jpeg" class="img-fluid" alt="...">
    </div>
</section>




<!-- 脚部信息 -->

<section class="p-4">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
            <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
            </svg>
    <footer class="bg-black pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md mr-4">
                    <i class="fas fa-copyright text-white"></i>
                    <small class="d-block mt-3 text-muted">©
                        <script>document.write(new Date().getFullYear())</script>
                        邮箱:<a target="_blank" href="#">384323898@qq.com</a>.
                    </small>
                </div>

                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">玩家交流</h5>
                    <ul class="list-unstyled text-small">
                        <li><img style="width: 200px;height: 200px;" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/444a0bff4090f3651d126deb051c96a.jpg" alt=""></li>

                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">加入我们</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">发行商入蛀</a></li>
                        <li><a class="text-muted" href="#">分销联盟</a></li>
                        <li><a class="text-muted" href="#">KOL合作</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">客户中心</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">在线时间：09:00-21:00</a></li>
                        <li><a class="text-muted" href="#">电话客服：18520413815</a></li>
                        <li><a class="text-muted" href="#">QQ客服：384323898</a></li>
                        <li><a class="text-muted" href="#">微信客服：18520413815</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">关于</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">关于火游</a></li>
                        <li><a class="text-muted" href="#">服务条款</a></li>
                        <li><a class="text-muted" href="#">售后服务</a></li>
                        <li><a class="text-muted" href="#">客服中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</section>




<script>
    
    $(function () {
        $("#sendCode").click(function () {

        if ($(this).hasClass("disabled")){

        }else {
            //给指定手机发短信
            $.get("http://localhost:9100/sms/sendcode?phone="+$("#phone").val(),function () {
                if (data.code!=0){
                    alert(data.msg)
                }
            })
            timeoutChangeStyle()
        }

        });
    })
    var num=60;
    
    function timeoutChangeStyle() {
        $("#sendCode").attr("class","disabled")
        num--;
        if (num==0){
            $("#sendCode").text("发送验证码")
            num=60
            $("#sendCode").attr("class","")
        }else{
            var str=num+"s 后再次发送";
            $("#sendCode").text(str)
            setTimeout("timeoutChangeStyle()",1000);
        }

    }
    
    
    
    
</script>



<!-- ---------------------------------------- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>


</body>
</html>